<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>word-wrap</title>

        <style type="text/css">
            .wrapper {
                border: 1px solid blue ;
                width: 120px ;
                height: 50px ;
                margin: 15px auto ;
            }

            .first { word-wrap: normal ; }
            .second { word-wrap: break-word ; }
        </style>

    </head>
    <body>

        <div class="wrapper first">
            internationalization and localization
        </div>

        <div class="wrapper second">
            internationalization and localization
        </div>

        <div class="wrapper third">
            internationalization and localization
        </div>
        
    </body>
</html>